<template>
    <div class="manage">
        <el-dialog
            title="中草药信息"
            :visible.sync="dialogVisible"
            width="65%">
            <!-- 草药表单信息 -->
            <el-form :rules="rules"  ref="form" :model="form" label-width="80px" :before-close="handleClose">
                <div class="herb_container" style="width: 100%; padding: 30px;">
                <el-row>
                    <el-col :span="16">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="草药名" prop="herbName">
                                <el-input placeholder="请输入草药名" v-model="form.herbName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light">
                            <el-upload
                                class="avatar-uploader"
                                :show-file-list="false"
                                action="#"
                                :auto-upload="false"
                                :limit="1"
                                :http-request="uploadFile"
                                :on-success="handleAvatarSuccess"
                                ref="upload"
                                :before-upload="beforeAvatarUpload">
                                <el-button type="primary">中草药图片上传</el-button>
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="拉丁学名" prop="latinName">
                                <el-input placeholder="请输入拉丁名学名" v-model="form.latinName"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px" label="别名" prop="alias">
                                <el-input placeholder="请输入别名" v-model="form.alias"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="功效分类" prop="herbTypeId">
                                <el-select v-model="form.herbTypeId" placeholder="请选择功能分类">
                                    <el-option
                                    v-for="item in herbTypeList"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px" label="药用部分" prop="medicinalPart">
                                <el-input type="textarea" autosize placeholder="请输入药用部分" v-model="form.medicinalPart"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" type="textarea" autosize label="植物形态" prop="plantMorphology">
                                <el-input type="textarea" autosize placeholder="请输入植物形态" v-model="form.plantMorphology"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px" label="产地分布" prop="originDistribution">
                                <el-input type="textarea" autosize placeholder="请输入产地分布" v-model="form.originDistribution"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="采收加工" prop="harvestingProcessing">
                                <el-input type="textarea" autosize placeholder="请输入采收加工" v-model="form.harvestingProcessing"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px" label="药材性状" prop="drugProperties">
                                <el-input type="textarea" autosize placeholder="请输入药材性状" v-model="form.drugProperties"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="性味" prop="natureFlavor">
                                <el-input placeholder="请输入性味" v-model="form.natureFlavor"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px" label="归经" prop="channelTropism">
                                <el-input placeholder="请输入归经" v-model="form.channelTropism"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="功效与作用" prop="efficacyEffect">
                                <el-input type="textarea" autosize placeholder="请输入功效与作用" v-model="form.efficacyEffect"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px" label="临床应用" prop="clinicalApplication">
                                <el-input type="textarea" autosize placeholder="请输入临床应用" v-model="form.clinicalApplication"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="药理研究" prop="pharmacologicalResearch">
                                <el-input type="textarea" autosize placeholder="请输入药理研究" v-model="form.pharmacologicalResearch"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px"  label="化学成分" prop="chemicalComponent">
                                <el-input type="textarea" autosize placeholder="请输入化学成分" v-model="form.chemicalComponent"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div class="grid-content bg-purple">
                            <el-form-item label-width="100px" label="使用禁忌" prop="usageTaboo">
                                <el-input type="textarea" autosize placeholder="请输入使用禁忌" v-model="form.usageTaboo"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div class="grid-content bg-purple-light">
                            <el-form-item label-width="100px"  label="配伍药方" prop="compatiblePrescription">
                                <el-input type="textarea" autosize placeholder="请输入配伍药方" v-model="form.compatiblePrescription"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="submit()">确 定</el-button>
            </span>
        </el-dialog>
        <div class="manage-header">
            <el-button type="primary" @click="handleCreate()">
                + 新增
            </el-button>
            <!-- form搜索区域 -->
            <el-form :inline="true" :model="herb_form">
                <el-form-item>
                    <el-input placeholder="请输入草药名" v-model="herb_form.herbName"></el-input>
                </el-form-item>
                <el-button type="primary" style="height: 40px;" @click="onSubmit()"> 查询 </el-button>
            </el-form>
        </div>
        <div class="common-table">
            <el-table
                stripe
                :data="tableData"
                style="width: 100%"
                height="90%">
                    <el-table-column
                        label="中草药名"
                        style="cursor: pointer;"
                        @click="uploadDataSet">
                        <template slot-scope="scope">
                            <el-tag
                                size="medium"
                                type="info"
                                style="width: 80px; text-align: center; cursor: pointer;"
                                effect="dark"
                                @click="uploadDataSet(scope.row.id)">
                                {{ scope.row.herbName }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="latinName" sortable
                        label="英文学名">
                    </el-table-column>
                    <el-table-column
                        prop="alias"
                        label="别名">
                    </el-table-column>
                    <el-table-column
                        prop="natureFlavor"
                        label="性味">
                    </el-table-column>
                    <el-table-column
                        prop="channelTropism"
                        label="归经">
                    </el-table-column>
                    <el-table-column
                        label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pager">
                    <el-pagination
                        layout="prev, pager, next"
                        :total="total"
                        :page-size="pageData.size"
                        @current-change="handlePage">
                    </el-pagination>
                </div>
        </div>
    </div>
</template>
<script>



export default {
    data() {
      return {
        img:'',
        herbTypeList:[],
        dialogVisible: false,
        form:{ 
            herbName: "",
            latinName: "",
            herbTypeId: "",
            medicinalPart: "",
            alias: "",
            plantMorphology: "",
            originDistribution: "",
            harvestingProcessing: "",
            drugProperties: "",
            natureFlavor: "",
            channelTropism: "",
            efficacyEffect: "",
            clinicalApplication: "",
            pharmacologicalResearch: "",
            chemicalComponent: "",
            usageTaboo: "",
            compatiblePrescription: "",
        },
        rules:{
            herbName:[
                {required: true , message: '请输入中药名'}
            ],
            latinName:[
                {required: true , message: '请输入拉丁学名'}
            ],
            herbTypeId:[
                {required: true , message: '请选择功效分类',trigger: 'change'  }
            ],
            medicinalPart:[
                {required: true , message: '请输入药用部分'}
            ],  
            plantMorphology:[
                {required: true , message: '请输入植物形态'}
            ],  
            alias:[
                {required: true , message: '请输入别名'}
            ],
            originDistribution:[
                {required: true , message: '请输入产地分布'}
            ],  
            harvestingProcessing:[
                {required: true , message: '请输入采收加工'}
            ],
            drugProperties:[
                {required: true , message: '请输入药材性状'}
            ],  
            natureFlavor:[
                {required: true , message: '请输入性味'}
            ],
            channelTropism:[
                {required: true , message: '请输入归经'}
            ],
            efficacyEffect:[
                {required: true , message: '请输入功效与作用'}
            ],
            clinicalApplication:[
                {required: true , message: '请输入临床应用'}
            ],  
            pharmacologicalResearch:[
                {required: true , message: '请输入药理研究'}
            ],  
            chemicalComponent:[
                {required: true , message: '请输入化学成分'}
            ],  
            usageTaboo:[
                {required: true , message: '请输入使用禁忌'}
            ],  
            compatiblePrescription:[
                {required: true , message: '请输入配伍药方'}
            ],          
        },
        tableData:[

        ],
        modelType:0, //0 新增 1 编辑
        total:0,
        pageData:{
            page:1,
            size:6
        },
        herb_form:{
            herbName: ''
        }
      };
    },
    methods: {
        uploadDataSet(id){
            this.$router.push("/dataSet?id="+id)
        },
        uploadFile(param){
            this.img=param.file
            console.log(this.img)
        },
        submit(){
            this.$refs.form.validate((valid) => {
                if(valid){
                    this.$refs.upload.submit()
                    const formDatas = new FormData();
                    if (this.modelType==0 && this.img=='') {
                        this.$message({
                            type: 'warn',
                            message: '请选择中草药图片!'
                        });
                        return
                    }else{
                        if (this.img!=''){
                            formDatas.append("file", this.img); //把文件实体添加到表单对象
                        }
                    }
                    for (let key in this.form){
                        formDatas.append(key, this.form[key]);
                    }
                    let url=""
                    if(this.modelType==0){
                        url='/addHerb'
                    }else{
                        url='/updateHerb'
                    }
                    this.$axios.post(url,formDatas, {headers: {'Content-Type': 'multipart/form-data'}}).then(({data}) => {// 请求成功，返回
                        console.log(data);
                        if(data.code==200){
                            this.$message({
                                type: 'success',
                                message: data.data.message
                            });
                            this.getList()
                            this.$refs.form.resetFields()
                            this.dialogVisible= false
                        }else {
                                this.$message({
                                type: 'error',
                                message: data.data.message
                            });
                        }
                    }).catch((err) => {// 请求失败
                        console.log(err);
                    });
                }
             });
        },
        //弹窗关闭时触发
        handleClose(){
            this.emptyForm()
            this.$refs.form.resetFields()
            this.dialogVisible= false
        },
        cancel(){
            this.emptyForm()
            this.$refs.form.resetFields()
            this.handleClose() 
        },
        emptyForm(){
            this.form={
                herbName: "",
                latinName: "",
                herbTypeId: "",
                medicinalPart: "",
                alias: "",
                plantMorphology: "",
                originDistribution: "",
                harvestingProcessing: "",
                drugProperties: "",
                natureFlavor: "",
                channelTropism: "",
                efficacyEffect: "",
                clinicalApplication: "",
                pharmacologicalResearch: "",
                chemicalComponent: "",
                usageTaboo: "",
                compatiblePrescription: "",
            }
        },
        getHerbalTypeList(){
            this.$axios.get('/selectByHerbType')
            .then(({data}) => {// 请求成功，返回
                console.log(data);
                if(data.code===200){
                    this.herbTypeList=data.list
                }else{
                    this.$message.error(data.data.message)
                }
            })
            .catch((err) => {// 请求失败
                console.log(err);
            });
        },
        handleCreate(){
            this.getHerbalTypeList()
            this.dialogVisible= true
            this.$refs.form.resetFields()
            this.emptyForm()
            console.log(this.form)
            this.modelType= 0
        },
        handleEdit(row){
            this.emptyForm()
            this.modelType= 1
            this.dialogVisible= true
            //对当前行数据进行深拷贝，否则会出错
            this.form = JSON.parse(JSON.stringify(row))
        },
        handleDelete(row) { 
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.$axios.delete('/deleteHerb',{
                    data: {
                        id: row.id
                    }}).then(()=>{
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getList()
                })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
        },
        getList(){
            this.img=''
            this.$axios.get('/getHerbList',{params:{...this.herb_form,...this.pageData}}).then(({data}) =>{
                console.log(data)
                this.getHerbalTypeList()
                console.log(this.herbTypeList)
                this.tableData = data.list
                this.total = data.data.pageData.count || 0
            })
        },
        handlePage(val){
            // console.log(val)
            this.pageData.page = val
            this.getList()
        },
        onSubmit(){
            this.getList()
        }
     },
     mounted() {
        this.getList()
    }
  };
</script>

<style lang="less" scoped>
.herb_container{
    .el-form-item {
        margin-bottom: 20px; /* 表单项之间的间距 */
        el-input{
            width: 220px;
        }
    }
}
.el-form {
  display: flex; /* 使用 Flex 布局 */
  flex-wrap: wrap; /* 如果空间不够，换行显示 */
}


.avatar-uploader{
    margin-right: 120px; /* 表单项之间的间距 */
    width: 178px;
    height: 178px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
.manage{
    height:90%;
    .manage-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .common-table{
        position: relative;
        height: calc(100% - 62px);
        .pager{
            position: absolute;
            bottom: 0;
            right: 20px;
        }
    }
}
</style>